import * as React from 'react';
// import { StatusBar } from 'expo-status-bar';
import { StatusBar, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { GestureHandlerRootView } from "react-native-gesture-handler"
import General from './screen/General';
import Data from './screen/Data';
import Prediction from './screen/Prediction';
import About from './screen/About';
import Manage from './screen/Manage';

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <NavigationContainer>
          <Tab.Navigator
            screenOptions={{
              tabBarLabelStyle: { fontSize: 12 },
              // tabBarItemStyle: { width: 100 },
              tabBarStyle: { backgroundColor: 'white' },
              tabBarAndroidRipple: { borderless: false, color: '#fff' },
              tabBarIndicatorStyle: {
                backgroundColor: '#7367f0',
              },
              lazy: true,
              swipeEnabled: false,
            }}
            sceneContainerStyle={{ backgroundColor: '#f7f7f7' }}
            tabBarPosition="top"
            initialRouteName="看板"
          >
            <Tab.Screen
              name="总览"
              component={General}
            />
            <Tab.Screen name="数据" component={Data} />
            <Tab.Screen name="预测" component={Prediction} />
            <Tab.Screen name="看板" component={About} />
            <Tab.Screen name="管理" component={Manage} />
          </Tab.Navigator>
        </NavigationContainer >
        {/* <StatusBar style="light"></StatusBar> */}
        < StatusBar backgroundColor="white" />
      </GestureHandlerRootView >
    </>
  );
}

